<template>
  <div class="box">
    <div class="btop">
      <div class="bt1">{{ detail.symbolName }} {{ $t("common.yongxu") }}</div>
      <div class="bt2">{{ detail.createTime }}</div>
    </div>
    <div class="chexiao" @click="backoutOne">{{ $t("common.chexiao") }}</div>
    <div class="bfont1" :class="detail.side == '0' ? 'green' : 'red'">
      {{ detail.stopLostType }}{{ detail.hasStopProfit == "是" ? "止盈" : ""
      }}{{ detail.hasStopLost == "是" ? "止损" : "" }}/{{ detail.sideType }}
    </div>
    <div class="ubox">
      <div class="uli">
        <div class="uli1">{{ $t("long.weituozongliang") }}</div>
        <div class="uli2">
          {{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.num
                : $formatMoney(detail.currencyNum, 2)
              : $formatMoney(parseInt(detail.num * detail.sheet),11)
          }}
          {{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }}
        </div>
      </div>
      <div class="uli" v-show="detail.hasStopProfit == '是'">
        <div class="uli1">{{ $t("long.zhiyingchufajia") }}</div>
        <div class="uli2">
          {{ $formatMoney(detail.stopProfitTrigger, 2) }}（{{
            $t("common.biaojijiage")
          }}）
        </div>
      </div>
      <div class="uli" v-show="detail.hasStopProfit == '是'">
        <div class="uli1">{{ $t("long.zhiyingweituojia") }}</div>
        <div class="uli2">
          {{
            detail.stopProfitType == "市价"
              ? $t("common.shijia")
              : $formatMoney(detail.stopProfitPrice, 2)
          }}
        </div>
      </div>
      <div class="uli" v-show="detail.hasStopLost == '是'">
        <div class="uli1">{{ $t("long.zhisungchufajia") }}</div>
        <div class="uli2">
          {{ $formatMoney(detail.stopLostTrigger, 2) }} ({{
            $t("common.biaojijiage")
          }})
        </div>
      </div>
      <div class="uli" v-show="detail.hasStopLost == '是'">
        <div class="uli1">{{ $t("long.zhisungweituojia") }}</div>
        <div class="uli2">
          {{
            detail.stopLostType == "市价"
              ? $t("common.shijia")
              : $formatMoney(detail.stopLostPrice, 2)
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["detail", "curyType"],
  data() {
    return {};
  },
  methods: {
    async backoutOne() {
      this.$emit("backoutOne", {
        id: this.detail.id,
        type: "stoporder",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 3vw;
  position: relative;
  .chexiao {
    padding: 1.4vw 3vw 1.3vw;
    background-color: #171A2B;
    color: #d6d6d6;
    font-size: 2.8vw;
    border-radius: 2px;
    position: absolute;
    bottom: 4vw;
    right: 3vw;
  }
  .btop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bt1 {
      font-size: 4vw;
      color: #fff;
    }
    .bt2 {
      font-size: 3.2vw;
      color: #8992AE;
    }
  }
  .bfont1 {
    font-size: 3.2vw;
    color: #5eba89;
    text-align: left;
    margin: 2vw 0 3vw;
  }
  .ubox {
    .uli {
      display: flex;
      align-items: center;
      height: 6.4vw;
      .uli1 {
        font-size: 3.2vw;
        color: #8992AE;
        margin-right: 2vw;
      }
      .uli2 {
        font-size: 3.2vw;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
</style>